import * as echarts from 'echarts';
import switchPanelData from './switchPanelData';
const myEcharts = echarts.init(document.querySelector('.line .chart'));
const switchBtn = document.querySelector('.switch');
const linkList = Array.from(switchBtn.children);

/* 事件委托 */
switchBtn.addEventListener('click', function (e) {
  e.preventDefault();
  /* 获取索引,配对获取相对应数据的索引 */
  let index = linkList.indexOf(e.target);
  option = switchPanelData(option, CountriesData, index);
  myEcharts.setOption(option);
});

const CountriesData = [
  {
    name: '中国',
    data: [
      [37, 24, 27, 20, 31, 73, 57],
      [33, 31, 32, 17, 30, 23, 29]
    ]
  },
  {
    name: '阿三',
    data: [
      [24109, 13702, 18760, 5466, 21327, 39586, 26583],
      [114706, 130458, 186103, 97141, 183468, 119717, 149858]
    ]
  },
  {
    name: '灯塔国',
    data: [
      [56802, 42134, 48044, 56079, 61750, 64861, 65832],
      [58669, 84417, 81074, 75761, 67641, 51156, 80781]
    ]
  },
  {
    name: '德国',
    data: [
      [7419, 7408, 3588, 10285, 11785, 12504, 13500],
      [6404, 24108, 27042, 15310, 20862, 15393, 14599]
    ]
  },
  {
    name: '踢足球的',
    data: [
      [67477, 80024, 36136, 69537, 80955, 78297, 84047],
      [82869, 90973, 89293, 89090, 69592, 37537, 38866]
    ]
  },
  {
    data: [
      ['3.7', '3.8', '3.9', '3.10', '3.11', '3.12', '3.13'],
      ['4.7', '4.8', '4.9', '4.10', '4.11', '4.12', '4.13']
    ]
  }
];

let option = {
  title: {},
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    top: '23%',
    left: '3%',
    right: '4%',
    bottom: '0%',
    show: true,
    borderColor: '#012f4a',
    containLabel: true
  },
  legend: {
    top: '10px',
    textStyle: {
      color: '#4c9bfd'
    },
  },
  xAxis: {
    type: 'category',
    data: ['4.7', '4.8', '4.9', '4.10', '4.11', '4.12', '4.13'],
    axisTick: false,
    axisLabel: {
      color: '#4c9bfd'
    },
    axisLine: {
      show: false
    },
    boundaryGap: false
  },
  yAxis: {
    type: 'value',
    axisTick: false,
    axisLabel: {
      color: '#4c9bfd'
    },
    splitLine: {
      lineStyle: {
        color: '#012f4a'
      }
    }
  },
  color: ['#ed3f35', '#F18B2F', '#1089E7', '#8B78F6', '#008000'],
  series: [
    {
      name: '中国',
      type: 'line',
      data: [33, 31, 32, 17, 30, 23, 29],
      smooth: true
    },
    {
      name: '阿三',
      type: 'line',
      data: [114706, 130458, 186103, 97141, 183468, 119717, 149858],
      smooth: true
    },
    {
      name: '灯塔国',
      type: 'line',
      data: [58669, 84417, 81074, 75761, 67641, 51156, 80781],
      smooth: true
    },
    {
      name: '前法西斯',
      type: 'line',
      data: [6404, 24108, 27042, 15310, 20862, 15393, 14599],
      smooth: true
    },
    {
      name: '足球国',
      type: 'line',
      data: [82869, 90973, 89293, 89090, 69592, 37537, 38866],
      smooth: true
    }
  ]
};

myEcharts.setOption(option);

window.addEventListener('resize', function () {
  myEcharts.resize();
});
